<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 500px;
            height: 500px;
            color: #e38a0e;
            margin: 100px auto;
        }


        ul li>span {
            display: inline-block;
            height: 40px;
            width: 75px;
            line-height: 40px;
        }

        ul {
            width: 100%;
            height: 40px;
            border: 1px 0px solid #e38a0e;
            border-top: 1px solid #e38a0e;
            list-style: none;
        }

        ul li {
            width: 500px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e38a0e;
            border-top: 0px;
            text-align: center;
        }

        .NA button {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: none;
        }

        .NA span {
            display: inline-block;
            margin: 0 5px;
        }

        .but {
            width: 50px;
            height: 30px;
            border: none;
            background-color: white;
            color: #e38a0e;
        }

        .last {
            width: 500px;
            height: 40px;
            line-height: 40px;
            justify-content: space-between;
            display: flex;

            align-items: center;
        }

        .last div {
            margin-left: 55px;
            align-items: center;
        }

        .last div span {
            margin-right: 10px;
        }

        .last div button {
            width: 60px;
            height: 30px;
            border: none;
            color: white;
            margin-right: 10px;
            background-color: #e38a0e;
        }

        .active {
            background-color: #e38a0e;
            color: white;
        }
    </style>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <!-- <h1>
            小黑购物车
        </h1> -->

        <div class="content">
            <ul>
                <li>
                    <span>选中</span>
                    <span>商品</span>
                    <span>单价</span>
                    <span>个数</span>
                    <span>小计</span>
                    <span>操作</span>
                </li>
                <li v-for="(item,index) in list" :class="{active:item.isChecked}">
                    <span><input type="checkbox" v-model="item.isChecked"></span>
                    <span>{{item.name}}</span>
                    <span>{{item.price}}</span>
                    <span class="NA">
                        <button @click="item.num--">-</button>
                        <span>{{item.num}}</span>
                        <button @click="item.num++">+</button>
                    </span>
                    <span>{{(item.price)*(item.num)}}</span>
                    <span><button class="but" @click="del(item.id)">删除</button></span>
                </li>
                <li class="last">
                    <div><input type="checkbox" v-model="isAll">&nbsp;&nbsp;&nbsp;&nbsp;全选</div>
                    <div>
                        <span>合计:￥{{sumPrice}}</span>
                        <span><button class="but">结算({{total}})</button></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    list: [
                        { id: 1, name: '苹果', num: 0, price: 5, isChecked: false },
                        { id: 2, name: '香蕉', num: 0, price: 3, isChecked: false },
                        { id: 3, name: '草莓', num: 0, price: 2, isChecked: false },
                        { id: 4, name: '西瓜', num: 0, price: 4, isChecked: false },
                    ],
                    Num: 0,
                    sum: 0,
                }
            },
            methods: {
                del(id) {
                    this.list = this.list.filter(item => item.id !== id)
                },
            },
            computed: {
                sumPrice() {
                    return this.list.reduce((sum, item) => {
                        if (item.isChecked) {
                            return sum + item.price * item.num
                        }
                        else {
                            return sum
                        }
                    }, 0)
                },
                total() {
                    return this.list.reduce((sum, item) => {
                        if (item.isChecked) {
                            return sum + item.num
                        }
                        else {
                            return sum
                        }
                    }, 0)
                },
                isAll: {
                    get() {
                        return this.list.every(item => item.isChecked)
                    },
                    set(val) {
                        this.list.forEach(item => item.isChecked = val)
                    }
                }
            }
        }).mount('#app')
    </script>
</body>

</html>